<template>
    <div>
        <!-- 头部导航 -->
        <CircleNav>
            <template #back>
                <van-icon name="arrow-left" color="#ddd" @click="$router.back()" size="25px" />
            </template>
        </CircleNav>
        <!-- 商品图片 -->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item>
                <van-image width="100vw" fit="cover" :src="UPL + sp_img" />
            </van-swipe-item>
            <van-swipe-item>
                <van-image width="100vw" fit="cover" :src="UPL + sp_img" />
            </van-swipe-item>
            <van-swipe-item>
                <van-image width="100vw" fit="cover" :src="UPL + sp_img" />
            </van-swipe-item>
            <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
        </van-swipe>
        <!-- 详情 -->
        <div v-if="shopInfo.length" class="shopDetail">
            <div style="display: flex; justify-content:space-between;">
                <div style="color: red;"><span style="font-size: 20px;">￥</span> {{ shopInfo[0].img_price }}</div>
                <div>库存 <span style="color: red;">{{ shopInfo[0].sp_amount }}</span></div>
            </div>
            <div>
                <van-tag type="danger">{{ shopInfo[0].sp_name }}</van-tag>
                <span>{{ shopInfo[0].sp_rmd }}</span>
            </div>
        </div>

        <div class="shopDetail">
            <div><span>选择</span></div>
            <div><span>发货</span></div>
            <div><span>保障</span></div>
            <div><span>参数</span></div>
        </div>

        <!-- 宝贝评价 -->
        <div class="comment">
            <div class="top">
                <span style="font-weight:700;">宝贝评价(1000+)</span>
                <span style="color: #ff5304;">查看全部 ></span>
            </div>
            <div class="center">
                <span>质量好(81)</span>
                <span>价格实惠(99)</span>
                <span>猫咪非常喜欢(54)</span>
                <span>很柔软(61)</span>
            </div>
            <div class="bottom">
                <div>
                    <van-image round width="3rem" height="3rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                        fit="cover" />
                    <span>匿名</span>
                </div>

                <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum sapiente aspernatur inventore est
                    ipsum nulla assumenda nisi voluptates ad nesciunt maiores, excepturi, quia minus veniam in obcaecati
                    exercitationem repudiandae sint!</div>
                <div>
                    <van-image width="10rem" height="10rem" fit="contain"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>
            </div>
        </div>


        <!-- 底部导航 -->
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" />
            <van-action-bar-icon icon="cart-o" text="购物车" />
            <van-action-bar-icon icon="star-o" text="已收藏" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addShopCar" />
            <van-action-bar-button type="danger" text="立即购买" @click="buyShop" />
        </van-action-bar>
    </div>
</template>

<script setup>
import { shopApi } from '@/http/apis/shopApi';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'
import baseURL from '@/http/baseURL';
import { showToast, showSuccessToast } from 'vant';
let UPL = baseURL.UPL + '/'
let shopInfo = ref([])
// console.log(shopInfo.value);
let sp_img = ref('')


//show
const show = ref(false);

// 底部导航
const buyShop = () => showToast({
    message: '购买'
});
const addShopCar = () => showSuccessToast('添加成功');
onMounted(() => {
    // 获取详情
    let sp_id = useRoute().query.id
    shopApi.queryShopById({ sp_id }).then((res) => {
        shopInfo.value = res.data.data
        sp_img.value = shopInfo.value[0].sp_img

    })
    // 回到顶部
    window.scrollTo(0, 0)
})
</script>

<style lang="scss" scoped>
// 宝贝评论
.comment {
    margin: 10px;
    background-color: #f7f8fa;
    border-radius: 15px;
    padding: 15px 20px;
    margin-bottom: 70px;

    >.top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    >.center {
        span {
            display: inline-block;
            background: pink;
            padding: 5px 10px;
            border-radius: 10px;
            margin: 2px 5px;
        }
    }

}

.shopDetail {
    margin: 10px;
    background-color: #f7f8fa;
    border-radius: 15px;
    padding: 5px 15px;

    >div {
        padding: 10px 5px;
    }
}

.custom-indicator {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 3px 6px;
    font-size: 15px;
}
</style>